<!-- 安装软件分布图 -->
<template>
  <div class="wrap">
    <!-- top <span>10</span> -->
    <span  class="title"> 安装软件分布图</span>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :lg="24">
        <piechart   id="chartInstall" :chartData="pieData" />
      </el-col>
    </el-row>
    <!-- <piechart :title="'访问用户统计分析'"  id="chart3" :chartData="pieData" /> -->
    <!-- <el-table stripe border :data="dataList" style="width: 100%; margin: 15px 0">
      <el-table-column label="序号" width="50" align="center" type="index"></el-table-column>
      <el-table-column label="ip" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.Name }}
        </template>
      </el-table-column>
      <el-table-column label="加速次数" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.Count }}
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>
<script>
import piechart from "./piechart.vue";
import { connrequest } from "@/api/firstPage";
import { getNowDay } from '@/utils/index.js'
export default {
  components:{piechart},
  data() {
    return {
      dataList: [],
      pieData:[],
      listTime:[{'StartTime':'','EndTime':''}],
      total:0,
      prevenData:{},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getInfo();
    
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    getTimeList(i){
      // 获取当前日期
      var today = new Date();
      this.listTime[0].StartTime=formatDate(today, i, true)
      this.listTime[0].EndTime=formatDate(today, 0, false)
      function formatDate(date, daysToAdd, isStart) {
        var newDate = new Date(date);
        newDate.setDate(date.getDate() - daysToAdd);
        
        var year = newDate.getFullYear();
        var month = String(newDate.getMonth() + 1).padStart(2, '0');
        var day = String(newDate.getDate()).padStart(2, '0');
        var hours = isStart ? '00' : '23';
        var minutes = isStart ? '00' : '59';
        var seconds = isStart ? '00' : '59';

        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      }
    },
    async getInfo() {

      // this.prevenData = res.Data || {}
      // this.prevenData.processDays = this.prevenData?.processDays || 7
      // this.getTimeList(this.prevenData.processDays-1)
      this.getData();
    },
    async getData() {
      let arr = []
      const data = {
        Filter: {
          "StartDate": Date.parse(this.listTime[0].StartTime),
          "EndDate": Date.parse(this.listTime[0].EndTime)
          // "TransDate": "",
          // "PrimArea": "",
          // "SecondArea": "",
          // "SchoolName": "",
          // "DeviceName": "",
          // "ProcClass":"", 
          // "ProcName":"", 
          // "SumCount":10
        }
      }
      const data2 = {
        Filter:{
          InstallAppType: 1,
        } 
      } 
      const res = await connrequest('GetInstallAppSumGroupByClass',data2);
	    res.Data = res.Data || []
      if(res.Data.length){
        res.Data.map(item => {
          // item.Count = item.Count.toLocaleString()
          arr.push({name: item.Name || "其他", value: item.Count,Count:item.Count})
          // this.total += item.Count
        })
        
        this.pieData = arr
        // this.dataList = res.Data;
        	  // console.log("212",res,this.pieData);
      }else{
        const dom = document.getElementById('chartInstall');
        dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
        dom.removeAttribute('_echarts_instance_');
      }
    }
  }
};
</script>
<style scoped lang='scss'>
.wrap {
  height: 360px;
  overflow: hidden;
}
</style>
